<template>
	<view class="contents">
		<view class="content">
			<view class="parent">
				<image src="../../static/kin/dad.png" mode="aspectFit" class="img"></image>
				<button class="parentRelation" @click="getRelation('爸爸')">爸爸</button>
				
			</view>
			<view class="parent">
				<image src="../../static/kin/mom.png" mode="aspectFit" class="img"></image>
				<button class="parentRelation" @click="getRelation('妈妈')">妈妈</button>
			</view>
		</view>
		
		<view class="content">
			<view class="parent">
				<image src="../../static/kin/爷爷.png" mode="aspectFit" class="img"></image>
				<button class="parentRelation" @click="getRelation('爷爷')">爷爷</button>
			</view>
			<view class="parent">
				<image src="../../static/kin/奶奶.png" mode="aspectFit" class="img"></image>
				<button class="parentRelation" @click="getRelation('奶奶')">奶奶</button>
			</view>
		</view>
		
		<view class="content">
			<view class="parent">
				<image src="../../static/kin/grandpa.png" mode="aspectFit" class="img"></image>
				<button class="parentRelation" @click="getRelation('外公')">外公</button>
			</view>
			<view class="parent">
				<image src="../../static/kin/grandma.png" mode="aspectFit" class="img"></image>
				<button class="parentRelation" @click="getRelation('外婆')">外婆</button>
			</view>
		</view>
		
		<button class="tz" @click="addParent" style="background-color:#F5BF46;">下一步</button>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				relation: '',
				parent:{
					parentVxid:'',
					parentVxtx:'',
					parentRelation:''
				}
				
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo") //拿微信登录存进去的 userinfo
			//先判断数据库是否已存在该家长用户的openid，如果已存在则从数据库里拿
			this.checkOpenId();
			
		},
		methods: {
			//检查家长的 openid 在家长表是否已存在
			checkOpenId(){
				
				uni.$api.findParentByVxId(this.userInfo.mpWeixinOpenId).then(res => {

					if(res === '' || res === null){ //如果家长用户在数据库不存在
						console.log("用户不存在")
					} else {
						console.log("用户已存在")
						uni.setStorageSync("parentId", res.id)
						uni.setStorageSync("parentRelation", res.parentRelation)
						this.toINdex()
					}
				})
			},
			getRelation(re){
				this.relation = re;
			},
			addParent(){
				this.parent.parentVxid = this.userInfo.mpWeixinOpenId
				this.parent.parentVxtx = this.userInfo.headImg
				this.parent.parentRelation = this.relation
				
				//家长信息存入数据库
				uni.$api.parentInfoAdd(this.parent).then( res => {
					uni.setStorageSync("parentId", res) //家长信息存入家长表后，返回的家长id存入公共缓存
					uni.setStorageSync("parentRelation", this.parent.parentRelation) //家长和学生关系存入公共缓存
					this.toINdex() //跳转首页
				})
			},
			//跳转首页方法
			toINdex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss">
.contents{
	width: 750rpx;
	background-color: #fff;
	padding-bottom: 230rpx;
	position: fixed;
	top:0;
	left: 0%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.content{
	width: 600rpx;
	// border: 1px black solid;
	margin: 0 auto;
	// background-color: #fff;
	overflow: hidden;
}
.content::after {
    content: '';
    display: block;
    clear: both;
}
.parent{
	display: inline-block;
	width: 300rpx;
	margin-top: 40rpx;
	align-content: center;
	position: relative;
}

.img{
	width: 150rpx;
	height: 145rpx;
	border-radius: 50%;
	background-color: #FDF7F0;
	margin-left: 75rpx;
	
}
.parentRelation{
	font-size: 25rpx;
	width: 150rpx;
	height: 50rpx;
	line-height: 50rpx;
	color: #9b9b9b;
	border-radius: 25rpx;
	// border: none;
	background-color: white;
}
.parentRelation:hover{
	color: white;
	background-color: #F5BF46;
}
	
.tz{
	position: absolute;
	bottom: 70rpx;
	left: 50%;
	transform: translate(-50%, 0);
	width: 300rpx;
	height: 80rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	font-weight: bold;
	border-radius: 45rpx;
}
</style>
